<template>
  <div class="container">
    <scroll-view class="tab-view"
                 scroll-x
                 scroll-with-animation
                 :scroll-left="scrollLeft">
      <view class="tab-bar-item"
            v-for="(item,index) in tabbar"
            :key="index"
            :data-current="index"
            @tap.stop="swichNav">
        <text class="tab-bar-title"
              :class="currentTab==index&&'active'">{{item.msg}}</text>
      </view>
    </scroll-view>
    <swiper class="tab-content"
            :current="currentTab"
            duration="300"
            @change="switchTab"
            :style="{height:winHeight+'px'}">
      <swiper-item v-for="(item,index) in tabbar"
                   :key="index">
        <scroll-view scroll-y
                     class="scoll-y"
                     @scrolltolower="pullrefresh">
          <div class="list-view">
            <div class="item-view"
                 v-for="(item,i) in listDate"
                 :key="i"
                 @tap="todetail(item)">
              <!-- 状态-->
              <div class="state">
                <div class="statelf red"
                     v-if="item.order_status==1">剩余支付时间&nbsp;{{item.end_time}}</div>
                <div class="statelf"
                     v-if="item.order_status>=5">{{item.order_status_tag}}</div>
                <div class="statert red"
                     v-if="item.order_status==1">待付款</div>
                <div class="statert red"
                     v-if="item.order_status==2">待消费</div>
                <div class="statert red"
                     v-if="item.order_status==3">预约中</div>
                <div class="statert red"
                     v-if="item.order_status==4&&item.type==1">待评价</div>
                <div class="statert red"
                     v-if="item.order_status==4&&item.type==2">已消费</div>
                <div class="statert"
                     v-if="item.order_status==5">已关闭</div>
              </div>
              <!-- 项目信息 -->
              <div class="project-info">
                <div class="picwrap">
                  <img v-if="imgUrl&&item.project_detail.project_image"
                       :src="imgUrl+item.project_detail.project_image"
                       alt />
                </div>
                <div class="detail">
                  <div class="name">{{item.project_detail.project_name}}</div>
                  <div class="hospital">{{item.project_detail.hospital_name}}</div>
                  <!-- <div class="plus" v-if="item.plus_title&&item.plus_title!=''">{{item.plus_title}}</div> -->
                  <div class="price">
                    <div class="money">
                      <span class="yang">¥</span>
                      <span class="amount">{{item.project_detail.project_price}}</span>
                    </div>

                    <div class="msg"
                         v-if="item.project_detail.deduction_method==1">
                      <img class="icon"
                           v-if="imgOss"
                           :src="imgOss+'/mp_3.1.6/goldcoin/gold.png'"
                           alt />
                      <span v-if="item.isQ">全金币抵扣</span>
                      <span v-else>金币可抵{{item.project_detail.deduction_credit}}元</span>
                    </div>
                    <span class="msg msgcolor"
                          v-if="item.project_detail.deduction_method==2">
                      <img class="icon"
                           v-if="imgOss"
                           :src="imgOss+'/mp_3.1.6/goldcoin/silver.png'"
                           alt />
                      <span v-if="item.isQ">全银币抵扣</span>
                      <span v-else>银币币可抵{{item.project_detail.deduction_credit}}元</span>
                    </span>
                    <span class="servermum"
                          v-if="item.type==2">x1</span>
                  </div>
                </div>
              </div>
              <!-- 合计 -->
              <div class="total">
                <span>合计:￥{{item.order_amount}}</span>
                <span v-if="item.pay_type==5||item.pay_type==7">（含{{item.deduction_integral}}金币抵扣{{item.deduction_integral}}元）</span>
                <span v-if="item.pay_type==6||item.pay_type==8">（含{{item.deduction_integral}}银币抵扣{{item.deduction_integral}}元）</span>
              </div>
              <!-- 按钮 -->
              <div class="btn">
                <div class="gobtn"
                     v-if="item.order_status==1"
                     @tap.stop="pay_order(item)">去付款</div>
                <div class="gobtn"
                     v-if="item.order_status==2&&item.type==1"
                     @tap.stop="orderId(item.id)">
                  <picker mode="date"
                          @change="booking_order"
                          :value="booking_time"
                          :start="booking_start">去预约</picker>
                </div>
                <div class="gobtn"
                     v-if="item.order_status==2&&item.type==2"
                     @tap.stop="todetail(item)">去消费</div>
                <div class="gosee"
                     v-if="item.order_status==3"
                     @tap.stop="todetail(item)">查看预约单</div>
                <div class="goevaluate"
                     v-if="item.order_status==4"
                     @tap.stop="evaluat(item)">去评价</div>
              </div>
            </div>
            <!-- 无订单列表显示 -->
            <div class="empty"
                 v-if="listDate.length<=0">
              <img class="img"
                   v-if="imgOss"
                   :src="imgOss+'/mp_3.1.6/serviceorder/emty_server@2x.png'"
                   alt />
              <div class="msg">你还没有相关订单哦</div>
            </div>
          </div>
        </scroll-view>
      </swiper-item>
    </swiper>
  </div>
</template>
<script>
import common from "@/assets/js/mmk_common.js";
export default {
  data () {
    return {
      imgUrl: common.image_response,
      imgOss: common.image_resource,
      winHeight: "", //窗口高度
      scrollLeft: 0, //滚动条位置
      currentTab: 0, //当前选中项的值
      tabbar: [
        {
          msg: "全部",
          tab: 0
        },
        {
          msg: "待支付",
          tab: 1
        },
        {
          msg: "待消费",
          tab: 2
        },
        {
          msg: "预约中",
          tab: 3
        },
        {
          msg: "已消费",
          tab: 4
        },
        {
          msg: "已关闭",
          tab: 5
        }
      ],
      page: 1,
      pageSize: 10,
      last_page: 0,
      listDate: [],
      booking_time: "",
      booking_start: new Date(new Date().getTime()).Format("yyyy-MM-dd"),
      order_id: 0 //保存订单id
    };
  },
  onLoad (options) {
    wx.setNavigationBarTitle({
      title: "服务订单"
    });
    Object.assign(this.$data, this.$options.data());
    let that = this;
    //  高度自适应
    wx.getSystemInfo({
      success: function (res) {
        let calc = res.windowHeight;
        that.winHeight = calc;
      }
    });
    // 初始化数据
    this.currentTab = 0;
    this.scrollLeft = 0;
    this.getServerOrder();
  },
  methods: {
    // 滚动切换标签样式
    switchTab: function (e) {
      let that = this;
      this.currentTab = e.mp.detail.current;
      this.page = 1;
      this.listDate = [];
      this.getServerOrder();
      this.checkCor();
    },
    // 点击标题切换当前页时改变样式
    swichNav: function (e) {
      let cur = e.mp.currentTarget.dataset.current;
      if (this.currentTab == cur) {
        return false;
      } else {
        this.currentTab = cur;
        this.page = 1;
        this.listDate = [];
        this.getServerOrder();
      }
    },
    //判断当前滚动超过一屏时，设置tab标题滚动条。
    checkCor: function () {
      if (this.currentTab > 2) {
        //这里距离按实际计算
        this.scrollLeft = 300;
      } else {
        this.scrollLeft = 0;
      }
    },
    // 获取服务订单列表
    getServerOrder: function () {
      common.mmk_Loading(0);
      common.fly_post(
        "api/v4_5/life/order_list",
        {
          page: this.page,
          size: this.pageSize,
          status: this.currentTab
        },
        result => {
          common.mmk_Loading(1);
          let res = result.data;
          if (res.status_code == 0) {
            this.last_page = res.data.last_page;
            let arr = res.data.data.length > 0 ? res.data.data : [];
            arr.map(item => {
              let now_time = new Date().getTime();
              let end_time = item.pay_end_time * 1000 - now_time;
              if (end_time > 0) {
                item.end_time = this.toHHmmss(end_time);
              } else {
                item.end_time = "00:00:00";
              }
              if (item.project_detail.deduction_credit == item.project_detail.project_price) {
                item.isQ = true
              } else {
                item.isQ = false
              }
              return item;
            });
            if (this.page == 1) {
              this.listDate = [];
            }
            this.listDate = this.listDate.concat(arr);
          }
        }
      );
    },
    // 时间戳转时分秒
    toHHmmss: function (data) {
      var s;
      var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = parseInt((data % (1000 * 60)) / 1000);
      s =
        (hours < 10 ? "0" + hours : hours) +
        ":" +
        (minutes < 10 ? "0" + minutes : minutes) +
        ":" +
        (seconds < 10 ? "0" + seconds : seconds);
      return s;
    },
    // 上拉加载更多
    pullrefresh: function (e) {
      if (this.page < this.last_page) {
        this.page++;
        this.getServerOrder();
      } else {
        common.mmk_Loading(2, "没有更多了");
      }
    },
    // 查看订单详情
    todetail (item) {
      wx.navigateTo({
        url:
          "/pages/package_mine/project_order_detail/main?order_id=" +
          item.id +
          "&type=" +
          item.type
      });
    },
    // 立即支付
    pay_order (item) {
      let that = this;
      wx.showLoading({
        title: "加载中", //提示的内容,
        mask: true, //显示透明蒙层，防止触摸穿透,
        success: res => { }
      });
      wx.getStorage({
        key: "open_id",
        success: res => {
          const open_id = res.data;
          common.fly_post(
            "api/v4_5/payment/wechatpay_miniapp_submit",
            {
              //预支付
              openid: open_id,
              body: item.project_detail.project_name,
              order_sn: item.order_sn,
              total: item.order_amount,
              submit_type: "project_full_order"
            },
            msg => {
              wx.hideLoading();
              let res = msg.data;
              if (res.status_code == 0) {
                wx.requestPayment({
                  timeStamp: res.data.timeStamp,
                  nonceStr: res.data.nonceStr,
                  package: res.data.package,
                  signType: "MD5",
                  paySign: res.data.paySign,
                  success: function (res) {
                    that.get_detail();
                  },
                  fail: function (res) {
                    wx.showToast({
                      title: "支付未成功", //提示的内容,
                      icon: "none", //图标,
                      duration: 1500, //延迟时间,
                      mask: true, //显示透明蒙层，防止触摸穿透,
                      success: res => { }
                    });
                  }
                });
              } else {
                wx.hideLoading();
                wx.showToast({
                  title: res.message,
                  icon: "none",
                  duration: 2000,
                  mask: true
                });
                return false;
              }
            }
          );
        },
        fail: () => {
          wx.showToast({
            title: "请先登录", //提示的内容,
            icon: "none", //图标,
            duration: 2000, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        }
      });
    },
    // 获取订单id
    orderId: function (id) {
      this.order_id = id;
    },
    // 去预约
    booking_order (e) {
      let that = this;
      const booking_date = e.mp.detail.value;
      wx.showLoading({
        title: "提交中",
        mask: true,
        success: res => { }
      });
      common.fly_post(
        "/api/v4_5/project/order/reservation",
        {
          order_id: this.order_id,
          appointment_time: booking_date
        },
        result => {
          let res = result.data;
          if (res.status_code == "0") {
            wx.showToast({
              title: "预约成功",
              icon: "none",
              duration: 1500,
              mask: true,
              success: res => {
                setTimeout(() => {
                  that.page = 1;
                  that.currentTab = 3; //切换至预约中
                  that.getServerOrder();
                }, 1500);
              }
            });
          } else {
            common.mmk_Loading(2, res.message);
          }
        }
      );
    },
    // 查看预约单
    booking_detail (item) {
      wx.navigateTo({
        url: `/pages/package_projects/yy_order_detail/main?booking_id=${
          item.project_order_id
          }`
      });
    },
    // 去评价
    evaluat (item) {
      wx.navigateTo({
        url: "/pages/package_mine/project_evaluation/main?id=" + item.id
      });
    }
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  background: #f7f7f7;
  box-sizing: border-box;
}
/*tabbar start*/
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.tab-view {
  width: 100%;
  height: 40px;
  overflow: hidden;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  background: #fff;
  white-space: nowrap;
}

.tab-bar-item {
  padding: 0;
  height: 40px;
  width: 16.66666%;
  line-height: 40px;
  display: inline-block;
  text-align: center;
  box-sizing: border-box;
  position: relative;
}

.tab-bar-title {
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  color: #666666;
  font-weight: 400;
  font-family: PingFangSC-Regular, PingFang SC;
}
.active {
  color: #3EB0A9 !important;
}
/*tabbar end*/
.scoll-y {
  height: 100%;
}
/*tabbar content*/
.list-view {
  padding-top: 40px;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
  .item-view {
    margin: 10px 10px 0;
    padding: 12px 10px;
    background: #ffffff;
    border-radius: 10px;
    box-sizing: border-box;
  }
  .state {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
    line-height: 16px;
    overflow: hidden;
    .statelf {
      float: left;
    }
    .statert {
      float: right;
    }
    .red {
      color: #3EB0A9;
    }
  }
  .project-info {
    display: flex;
    margin-top: 12px;
    .picwrap {
      width: 114px;
      height: 114px;
      border-radius: 5px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 5px;
      }
    }
    .detail {
      flex: 7;
      position: relative;
      .name {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 21px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .hospital {
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
        margin-top: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
      }
      .plus {
        padding: 0 5px;
        margin: 4px 0;
        line-height: 16px;
        font-size: 10px;
        font-family: "PingFangSC-Medium", "PingFang SC";
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0.2/plus_bg%402x.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        display: inline-block;
      }
      .price {
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        vertical-align: middle;
        .money {
          display: inline-block;
          vertical-align: middle;
          height: 20px;
          .yang {
            font-size: 12px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: #ff383e;
            margin-right: 1px;
            display: inline-block;
            vertical-align: baseline;
          }
          .amount {
            font-size: 18px;
            font-family: "PingFangSC-Medium", "PingFang SC";
            font-weight: 500;
            color: #ff383e;
            display: inline-block;
            vertical-align: baseline;
          }
        }

        .msg {
          font-size: 10px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: #f5d040;
          margin-left: 8px;
          height: 14px;
          display: inline-block;
          vertical-align: middle;
          margin-top: 6px;
          span {
            display: inline-block;
            vertical-align: middle;
          }
          .icon {
            width: 12px;
            height: 12px;
            display: inline-block;
            vertical-align: middle;
            margin-right: 1px;
          }
          &.msgcolor {
            color: #a5b3b9;
          }
        }

        .servermum {
          float: right;
          font-size: 12px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          line-height: 17px;
          margin-top: 3px;
        }
      }
    }
  }
  .total {
    margin-top: 24px;
    text-align: right;
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    line-height: 18px;
  }
  .btn {
    overflow: hidden;
    div {
      float: right;
      height: 28px;
      border-radius: 17px;
      text-align: center;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      padding: 5px 18px;
      margin-top: 12px;
      box-sizing: border-box;
    }
    .gobtn {
      color: #ffffff;
      background: linear-gradient(
        226deg,
        rgba(254, 120, 161, 1) 0%,
        rgba(254, 123, 136, 1) 100%
      );
    }
    .gosee {
      padding: 5px 6px;
      color: #999999;
      border: 1px solid rgba(204, 204, 204, 1);
    }
    .goevaluate {
      color: #3EB0A9;
      border: 1px solid rgba(255, 115, 164, 1);
    }
  }
  .empty {
    position: absolute;
    top: 78px;
    left: 50%;
    transform: translateX(-50%);
    .img {
      width: 170px;
      height: 170px;
    }
    .msg {
      margin-top: 2px;
      text-align: center;
      font-size: 14px;
      font-family: "PingFangSC-Regular";
      font-weight: 400;
      color: #606972;
      line-height: 20px;
    }
  }
}
</style>


